
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
ul{
    list-style: none;
}
.clearfix::before,
.clearfix::after{
    content: "";
    height: 0;
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
}
.iconhome{
    font-size: (18/54)*1rem;
}
.gl_input{
    width: 100%;
    height: (100/54)*1rem;
    display: flex;
    align-items: center;
    label{
        margin-left: (10/54)*1rem;
        font-weight: 500;
        font-size: (14/54)*1rem;
    }
    input{
        border: 0;
        width: 65%;
        height: (30/54)*1rem;
        border-radius: (8/54)*1rem;
        outline-style: none;
        padding-left: (5/54)*1rem;
        margin-left: (10/54)*1rem;
        font-size: (12/54)*1rem;
    }
}
.gl_button{
    width: 100%;
    height: (100/54)*1rem;
    display: flex;
    align-items: center;
    label{
        margin-left: (10/54)*1rem;
        font-weight: 500;
        font-size: (14/54)*1rem;
    }
    input{
        border: 0;
        width: 5%;
        height: (30/54)*1rem;
        border-radius: (8/54)*1rem;
        outline-style: none;
        padding-left: (6/54)*1rem;
        margin-left: (10/54)*1rem;
        font-size: (12/54)*1rem;
    }
    button{
        margin-left: (10/54)*1rem;
        border:none;
        width: 5%;
        height: (30/54)*1rem;
        border-radius: (8/54)*1rem;
        background-color: rgb(91, 134, 214);
        outline-style: none;
        &:active{
            background-color: rgb(14, 74, 185);
        }
    }
}
.button{
    display: flex;
    button{
        margin: (20/54)*1rem auto;
        width: (150/54)*1rem;
        height: (30/54)*1rem;
        border: none;
        outline-style: none;
        border-radius: (15/54)*1rem;
        color: rgba(236, 240, 241,1.0);
        background-color: rgba(46, 204, 113,1.0);
        cursor: pointer;
        &:hover{
            background-color: rgba(46, 204, 113,.7);
        }
    }
}
.top_active{
    background-color:  lightcyan !important;
    color:  rgba(51, 217, 178,1.0) !important;
    box-shadow:none !important;
}
.selector_active{
    background-color: rgba(120, 224, 143,1.0) !important;
    color: rgba(241, 242, 246,1.0) !important;
}
.test_active{
    background-color: rgba(116, 125, 140,1.0) !important;
    color:white !important;
}
.rotate{
    transform: rotate(180deg);
}
.fixedlayout{
    position: fixed !important;
    z-index: 99;
}
// * { touch-action: pan-y; } 
@keyframes loading{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(.1);
    }
}
body{
    overflow: hidden;
    .first-screen{
        position: absolute;
        z-index: 99;
        width: 100%;
        height: 100%;
        background-color: rgba(64, 64, 122,1.0);
        display: flex;
        justify-content: center;
        align-items: center;
        ul{
            width: 200px;
            height: 200px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: center;
            li{
                width: 30px;
                height: 30px;
                background-color: rgba(245, 246, 250,1.0);
                border-radius: 50%;
                
            }
            li:nth-child(1){
                animation: loading .4s linear infinite alternate;
            }
            li:nth-child(2){
                animation: loading .4s linear infinite 0.1s alternate;
            }
            li:nth-child(3){
                animation: loading .4s linear infinite 0.2s alternate;
            }
        }
    }
    .aside_change{
        @media screen and (max-width:1080px){
            display: none;
        }
        position: fixed;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto (30/54)*1rem auto auto;
        width: (20/54)*1rem;
        height: (180/54)*1rem;
        background-color:rgba($color: #000000, $alpha: .4);
        opacity: 0.5;
        border-radius: (8/54)*1rem;
        ul{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            border-radius: (8/54)*1rem;
            align-items: center;
            li{
                width: (18/54)*1rem;
                height: (18/54)*1rem;
                background-color:rgba($color: #ffffff, $alpha: .4);
                border-radius: 50%;
                cursor: pointer;
                &:hover{
                    background-color:rgb(20, 136, 145);
                }
            }
        }
    }
}
.wrap{
    position: relative;
    top: 0;
    .page_one{
        
        // .shade{
        //     position: absolute;
        //     background-color: rgba(0, 0, 0, 0.3);
        //     z-index: 9;
        //     display: none;
        // }
        display: flex;
        flex-direction: column;
        width: 100%;
        background: url(http://showapi.mmno.com/api.php/showapi.bing/img_1920) center no-repeat;
        // background-color: rgba($color: #abcdef, $alpha: .5);
        // background: url(../imgs/beijing6.jpg) center no-repeat;
        background-size: cover;
        position: relative;
        .search{
            position: absolute;
            width: 100%;
            height: 100%;
            background-color:rgba($color: #000000, $alpha: 0.5);
            z-index: 15;
            font-size: (13/54)*1rem;
            
            display: none;
            .sear_wrap{
                width: 50%;
                height: 90%;
                margin: (20/54)*1rem auto;
                background-color: rgba(247, 241, 227,1.0);
                overflow: hidden;
                border-radius: (5/54)*1rem;
                position: relative;
                @media screen and (max-width:1080px) {
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    border-radius: 0;
                    position: fixed;
                    
                }
                .sear_selector{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    .sear_top{
                        width: 100%;
                        height: 20%;
                        background-color: rgba(51, 217, 178,1.0);
                        display: grid;
                        grid-template-columns: repeat(5,1fr);
                        padding: (30/54)*1rem;
                        column-gap: (20/54)*1rem;
                        border-radius: (5/54)*1rem;
                        @media screen and (max-width:1080px){
                            height: 15%;
                            padding: (40/54)*1rem;
                        }
                        
                        // flex: auto;
                        // justify-content: space-around;
                        div{
                            background-color: rgba(51, 217, 178,1.0);
                            // align-self: center;
                            // height: 50px;
                            text-align: center;
                            line-height: (70/54)*1rem;

                            border-radius: (5/54)*1rem;
                            color: lightcyan;
                            border: (1/54)*1rem solid  lightcyan;
                            box-shadow: 0 (2/54)*1rem (1/54)*1rem  rgba(72, 84, 96,1.0);
                            transition: all 1s;
                            cursor:pointer;
                            &:hover{
                                background-color:  lightcyan;
                                color:  rgba(51, 217, 178,1.0);
                                box-shadow:none;
                            }
                        }
                    }
                    .sear_bottom{
                        flex: auto;
                        // display: flex;
                        // flex-direction: column;
                        overflow: hidden;
                        // overflow: scroll;
                        position: relative;
                        &>div{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            
                        }
                        
                        .innerwrap_one{
                            position: absolute;
                            top: 0;
                            z-index: 1;
                            background-color: rgba(247, 241, 227,1.0);
                            &>div{
                                height:(100/54)*1rem;
                                flex: auto;
                                display: flex;
                                span{
                                    margin: 0 (10/54)*1rem;
                                    line-height: (100/54)*1rem;
                                    white-space: nowrap;
                                }
                                div{
                                    background-color: rgba(149, 165, 166,1.0);
                                    margin: (20/54)*1rem (10/54)*1rem;
                                    border-radius: (10/54)*1rem;
                                    line-height: (60/54)*1rem;
                                    width: (60/54)*1rem;
                                    text-align: center;
                                    cursor: pointer;
                                    &:hover{
                                        background-color: rgba(236, 240, 241,1.0);
                                        color: black;
                                    }
                                } 
                            }
                            // .key{
                            //     display: flex;
                            //     align-items: center;
                            //     input{
                            //         margin-left: 10px;
                            //         height: 30px;
                            //         background-color: rgba(192, 195, 199, 0.6);
                            //         border: none;
                            //         border-radius: 5px;
                            //         width: 250px;
                            //         padding-left: 5px;
                            //         // margin-top: 30px;
                            //     }
                            //     label{
                            //         margin-left: 10px;
                            //     }
                            // }
                            
                        }
                        .innerwrap_two{
                            background-color: rgba(247, 241, 227,1.0);
                            // cursor: pointer;
                            position: absolute;
                            top: 0;
                            .IP_options{
                                height: (80/54)*1rem;
                                background-color: rgba(247, 241, 227,1.0);
                                display: grid;
                                grid-template-columns: repeat(2,1fr);
                                padding: (20/54)*1rem;
                                gap: (20/54)*1rem;
                                border-bottom: (2/54)*1rem solid rgba(120, 111, 166,1.0);
                                // border-bottom-left-radius:2px ;
                                div{
                                    text-align: center;
                                    line-height: (40/54)*1rem;
                                    // border-radius: 5px;
                                    background-color: rgba(116, 125, 140,.6);
                                    color: #ecf0f1;
                                    cursor:pointer;
                                    &:hover{
                                        background-color: rgba(116, 125, 140,1.0);
                                        color:white;
                                    }
                                }
                            }
                            
                        }
                        .innerwrap_three{
                            position: absolute;
                            background-color: rgba(247, 241, 227,1.0);
                            top: 0;
                            .test_options{
                                height: (80/54)*1rem;
                                background-color: rgba(247, 241, 227,1.0);
                                display: grid;
                                grid-template-columns: repeat(5,1fr);
                                padding: (20/54)*1rem;
                                gap: (20/54)*1rem;
                                border-bottom: (2/54)*1rem solid rgba(120, 111, 166,1.0);
                                // border-bottom-left-radius:2px ;
                                div{
                                    text-align: center;
                                    line-height: (40/54)*1rem;
                                    // border-radius: 5px;
                                    background-color: rgba(116, 125, 140,.6);
                                    color: #ecf0f1;
                                    cursor:pointer;
                                    &:hover{
                                        background-color: rgba(116, 125, 140,1.0);
                                        color:white;
                                    }
                                }
                            }
                            // .import{
                            //     height: 100px;
                            //     display: flex;
                            //     align-items: center;
                            //     div{
                            //         margin: 10px 20px;
                            //         input{
                            //             width: 200px;
                            //             outline-style: none;
                            //             border: 0;
                            //             border-radius: 5px;
                            //             margin-left: 5px;
                            //             height: 30px;
                            //             padding-left: 5px;
                                        
                            //         }
                            //     }
                            // }
                            
                        }
                        .innerwrap_four{
                            position: absolute;
                            top: 0;
                            background-color: rgba(247, 241, 227,1.0);
                            .idiom_options{
                                height: (80/54)*1rem;
                                background-color: rgba(247, 241, 227,1.0);
                                display: grid;
                                grid-template-columns: repeat(2,1fr);
                                padding: (20/54)*1rem;
                                gap: (20/54)*1rem;
                                div{
                                    text-align: center;
                                    line-height: (40/54)*1rem;
                                    // border-radius: 5px;
                                    background-color: rgba(116, 125, 140,.6);
                                    color: #ecf0f1;
                                    cursor:pointer;
                                    &:hover{
                                        background-color: rgba(116, 125, 140,1.0);
                                        color:white;
                                    }
                                }
                            }
                            .idiom_import{
                                .gl_button{
                                    display: none;
                                }
                            }
                            // .idiom_import{
                            //     height: 100px;
                            //     display: flex;
                            //     align-items: center;
                            //     div{
                            //         margin: 10px 20px;
                            //         input{
                            //             padding-left: 5px;
                            //             width: 200px;
                            //             outline-style: none;
                            //             border: 0;
                            //             border-radius: 5px;
                            //             margin-left: 5px;
                            //             height: 30px;
                            //         }
                            //     }
                                
                            // }
                        }
                        
                        
                    }
                }
                .sear_result{
                    width: 100%;
                    height: 100%;
                    background-color: cadetblue;
                    position: absolute;
                    z-index: 50;
                    bottom: 100%;
                    // bottom: 0;
                    // visibility: hidden;
                    transition: bottom 0.5s;
                    font-size: (14/54)*1rem;
                    font-weight: 500;
                    overflow: hidden;
                    // &>div{
                    //     position: relative;
                    //     overflow: hidden;
                    //     width: 100%;
                    //     height: 100%;
                    //     // padding: 15%;
                    // }
                    .shut{
                        position: absolute;
                        z-index: 1;
                        width: 100%;
                        button{
                            margin-top: (10/54)*1rem;
                            margin-right: (10/54)*1rem;
                            width: (30/54)*1rem;
                            height: (20/54)*1rem;
                            line-height: (20/54)*1rem;
                            border-radius: (5/54)*1rem;
                            border: none;
                            background-color: yellowgreen;
                            float: right;
                            cursor: pointer;
                            &:hover{
                                background-color: rgb(173, 189, 142);
                            }
                        }
                    }
                    .content_box{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        text-align: center;
                        overflow-y: scroll;
                        overflow-x: hidden;
                        min-width: (336/54)*1rem;
                        padding: 0 (10/54)*1rem;
                        // position: absolute;
                        // left: 0;
                        // left: 50%;
                        // right: auto;
                        // top: 50%;
                        // transform: translate(-50%,-50%);
                        // bottom: auto;
                        // margin: auto;
                        // white-space: nowrap;
                        width: 104%;
                        // height: auto;
                        // width: 100%;
                        height:100%;
                        div{
                            width: 90%;
                            margin-bottom: (10/54)*1rem;
                            span{
                                font-size: (16/54)*1rem;
                                font-weight: 500;
                            }
                            p{
                                text-indent: (30/54)*1rem;
                            }
                        }
                    }
                      
                }
                
            }
        }
        .head{
            width: 100%;
            height: (120/54)*1rem;
            @extend .clearfix;
            position: relative;
            // .log{
            //     display: inline-block;
            //     width: 10%;
            //     height: 50px;
            //     background-color: red;
            //     margin: 60px 0 0 15%;
            //     @media screen and (max-width:1024px) {
            //         background-color: blue;
            //     }
                
            // }
            audio{
                width: (100/54)*1rem;
                height: (50/54)*1rem;
            }
            .audio{
                display: inline-flex;
                flex-flow: row nowrap;
                width: (30/54)*1rem;
                height: (40/54)*1rem;
                // background-color: red;
                margin: (10/54)*1rem (20/54)*1rem;
                align-items: flex-end;
                cursor: pointer;
                div{
                    flex: 1;
                    background-color: rgb(10, 170, 157);
                    height: 100%;
                    &:nth-child(1){
                        height: 40%;
                        animation: musicOne 3s infinite alternate;
                        animation-name: none;
                    }
                    &:nth-child(2){
                        height: 60%;
                        animation: musicOne 2s infinite reverse;
                        animation-name: none;
                    }
                    &:nth-child(3){
                        height: 70%;
                        animation: musicOne 3s infinite alternate-reverse;
                        animation-name: none;
                    }
                    &:nth-child(4){
                        height: 55%;
                        animation: musicOne 2s infinite alternate;
                        animation-name: none;
                    }
                }
            }
            .navbar{
                // width: (275/54)*1rem;
                // min-width: (275/54)*1rem;
                float: right;
                margin-top: (90/54)*1rem;
                margin-right: (102/54)*1rem;
                display: flex;
                height: auto;
                // @extend .clearfix;
                @media screen and (max-width: 1080px){
                    display: none;
                }
                li{
                    flex: auto;
                    cursor: pointer;
                    position: relative;
                    text-align: right;
                    direction:rtl;
                    font-weight: 600;
                    font-size: (16/54)*1rem;
                    margin: 0 (5/54)*1rem;
                    text-align: center;
                    &:nth-child(1){
                        display: none;
                    }
                    @media screen and (max-width: 1080px){
                        // height:0;
                        display: none;
                        width: (48/54)*1rem;
                        margin: 0;
                        text-align: center;
                        // overflow: hidden;
                        &:nth-child(1){
                            height: (20/54)*1rem;
                            display: block;
                        }
                        
                    }
                    // &:nth-child(2){
                    //     div:nth-child(2){
                    //         color: rgba(83, 82, 237,1.0);
                    //     }
                    // }
                    div{
                        overflow: hidden;
                        transition: width 0.5s linear;
                        white-space: nowrap;
                        color: rgba(241, 242, 246,.8);
                    }
                    div:nth-child(1){
                        position: absolute;
                        width: 0;
                        color: rgba(83, 82, 237,1.0) !important;
                        
                    }
                    
                    @media screen and (min-width: 1080px){
                        &:hover div:nth-child(1){
                            width: 100%;
                        }
                    }
                    
                    
                }
                
            }
        }
        .main{
            flex: auto;
            width: 100%;
            overflow: hidden;
            position: relative;
            .selector{
                
                margin: (102/54)*1rem auto;
                width: (360/54)*1rem;
                height: (165/54)*1rem;
                // display: flex;
                // flex-direction: column;
                overflow: hidden;

                .slid{
                    width: 100%;
                    height: (28/54)*1rem;
                    // height: 20px;
                    // flex: 1;
                    background-color: rgba(0, 0, 0, 0.3);
                    text-align: center;
                    line-height: (28/54)*1rem;
                    border-radius: (10/54)*1rem;
                    cursor: pointer;
                    span{
                        display: block;
                    }
                }
                
                .option_box{
                    display: none;
                }
                .option{
                    // flex: 5;x
                    width: 100%;
                    background-color: rgba(245, 246, 250, 1.0);
                    height: (120/54)*1rem;
                    margin-top: (14/54)*1rem;
                    border-radius: (10/54)*1rem;
                    display: grid;
                    grid-template-rows: repeat(2,1fr);
                    grid-template-columns: repeat(3,1fr);
                    gap: (5/54)*1rem;
                    padding: (5/54)*1rem;
                    // place-content: center;
                    // justify-content: space-around;
                    // align-content: end;
                    div{
                        background-color: rgba(52, 73, 94,1.0);
                        border-radius: (10/54)*1rem;
                        text-align: center;
                        line-height: (52/54)*1rem;
                        color: #ffffff;
                        cursor: pointer;
                        &:hover{
                            // box-shadow: 0 0 3px 1px rgb(76, 128, 240);
                            transform: scale(1.05);
                        }
                    }
                }
                // ul{
                    // flex: 1;
                    // margin-bottom: (7/54)*1rem;
                    // --ms--margin-bottom: (7/54)*1rem;
                    // display: flex;
                    // width: (288/54)*1rem;
                    // margin-left: (21/54)*1rem;
                    // @media screen and (max-width:1080px) {
                    //     margin-bottom: (7/54)*1rem;
                    // }
                    // li{
                        // float: left;
                        // margin-left: 8%;
                        // padding: 0 1%;
                        // font-size: (14/54)*1rem;
                        // border-bottom: (2/54)*1rem solid transparent;
                        // margin: 0 (14/54)*1rem;
                        // cursor: pointer;
                        // color:rgba(189, 195, 199,1.0);
                        // word-wrap: normal;
                        // overflow-wrap: normal;
                //         white-space: nowrap;
                //         text-align: center;
                        
                        
                //     }
                //     li:nth-child(1){
                //         border-color:#2ecc71;
                //         color: white;
                //     }
                // }
                // .down{
                    // flex: 5;
                    // display: flex;
                    // position: relative;
                    // .select{
                    //     flex: 1;
                    //     height: 100%;
                    //     background-color: rgba(223, 228, 234,.5);
                    //     border-top-left-radius: 70px;
                    //     border-bottom-left-radius: 70px;
                    // }
                    // input{
                    //     // flex: 9;
                    //     width: 100%;
                    //     height: 100%;
                    //     border: 0;
                    //     // border-top-right-radius: 70px;
                    //     // border-bottom-right-radius: 70px;
                    //     border-radius: (70/54)*1rem;
                    //     outline: none;
                    //     color:white;
                    //     padding: (10/54)*1rem;
                    //     background-color: rgba(0, 0, 0, 0.3);
                    // }
                    // .dialog{
                    //     position: absolute;
                    //     top: 120%;
                    //     width: 100%;
                    //     background-color: white;
                    //     height: 350%;
                    //     border-radius: (15/54)*1rem;
                    //     z-index: 10;
                    //     display: none;
                    // }
                    
                // }
            }
            // .saying{
            //     background-color:rgba($color:rgb(0, 0, 0,), $alpha: 0.3);
            //     position: absolute;
            //     border-radius: (5/54)*1rem;
            //     width: 60%;
            //     bottom:15%;
            //     left: 3%;
            //     p{
            //         margin-bottom: (10/54)*1rem;
            //         font-size: (20/54)*1rem;
            //         font-weight: 500;
            //         text-indent: (28/54)*1rem;
            //         color:rgba(223, 228, 234,1.0);
            //     }
            // }
            
            // a{
            //     position: absolute;
                // width: 10px;
            //     // height: 10px;
            //     // background-color: red;
            //     right: (10/54)*1rem;
            //     bottom: (10/54)*1rem;
            //     .iconinfo{
            //         color: white;
            //         font-size: (25/54)*1rem;
            //     }
            // }
            
        }
    }
    .page_tow{
        width: 100%;
        background: rgba(87, 96, 111,1.0) url(../imgs/beijing6.jpg) center no-repeat;
        background-size: cover;
        .main{
            height: 100%;
            width: 100%;
            overflow: hidden;
            .scroll_bar{
                position: relative;
                margin: (28/54)*1rem auto;
                width: 80%;
                height: 90%;
                perspective: 500px;
                transform-style: preserve-3d;
                div{
                    width: 100%;
                    height: 100%;
                    visibility: hidden;
                    position: absolute;
                    .saying{
                        // background-color: white;
                        // width: 60%;
                        // height: 50%;
                        // margin-top: 50%;
                        transform: translate(-50%,-50%);
                        // display: inline-block;
                        // vertical-align: center;
                        height: auto;
                        width: auto;
                        // width: 80%;
                        // height: 30%;
                        position: absolute;
                        left: 50%;
                        // right: 0;
                        top: 50%;
                        // bottom: 0;
                        // margin: auto;
                        p{
                            margin-bottom: (5/54)*1rem;
                            font-size: (20/54)*1rem;
                            font-weight: 500;
                            color: rgba(34, 47, 62,1.0);
                            visibility: hidden;
                            text-indent: (20/54)*1rem;
                        }
                        .saying_one{
                            visibility: visible;
                        }
                        
                    }
                    
                    

                }
                div:nth-child(1){
                    visibility: visible;
                }
                ul{
                    width: (126/54)*1rem;
                    height: (26/54)*1rem;
                    background-color:rgba($color: #000000, $alpha: .3);
                    border-radius: (10/54)*1rem;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: (10/54)*1rem;
                    margin: auto;
                    padding: 0 (3/54)*1rem;
                    li{
                        width: (20/54)*1rem;
                        height: (20/54)*1rem;
                        border-radius: 50%;
                        float: left;
                        background-color:rgba($color: #ffffff, $alpha: .3);
                        margin: (3/54)*1rem (5/54)*1rem;
                        cursor: pointer;
                        
                    }
                }
            }
        }
    }
    .page_three{
        // background-color: rgb(19, 16, 16);
        background: url(../imgs/img1.jpg) center no-repeat;
        background-size: cover;
        position: relative;
        .main{
            width: (922/54)*1rem;
            height: 90%;
            background-color: rgba(206, 214, 224,1.0);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            @media screen and (max-width:1080px) {
                width: 100%;
                height: 100%;
                letter-spacing: 1.5px;
                word-spacing: 1.5px;
            }
            .chat_window{
                width: (938/54)*1rem;
                height: 91%;
                overflow-y: scroll;
                display: flex;
                flex-direction: column;
                // justify-content: flex-end;
                @media screen and (max-width:1080px) {
                    width: 100%;
                    height: 100%;
                }
            }
            .chat_window>div{
                // width: 700px;
                // height: 100px;
                margin-bottom: (10/54)*1rem;
                margin-top: (10/54)*1rem;
                max-width: 85%;
                display: flex;
            }
            .chat_window>div:nth-child(2){
                display: none;
            }
            .accept{
               
                flex-flow: row nowrap;
                align-content: flex-start;
                div:nth-child(1){
                    min-width: (50/54)*1rem;
                    min-height: (50/54)*1rem;
                    width: (50/54)*1rem;
                    height: (50/54)*1rem;
                    background: url(../imgs/机器人.png) center no-repeat;
                    background-size: cover;
                    margin: 0 (10/54)*1rem;
                    border-radius: (5/54)*1rem;
                }
                div:nth-child(2){
                    position: relative;
                    // padding-left: 5px;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    span{
                        font-size: (14/54)*1rem;
                        font-weight: 500;
                    }
                    .accept_content{
                        &::before{
                                content: '';
                                // background-color: red;
                                display: block;
                                position: absolute;
                                left: 0;
                                top: (18/54)*1rem;
                                z-index: 1;
                                transform: translateX(-90%);
                                // width: 0;
                                // transform: rotate(45deg) translateY(50%);
                                border-right:(6/54)*1rem solid rgba(241, 242, 246,1.0);
                                border-top:(6/54)*1rem solid transparent;
                                border-bottom:(6/54)*1rem solid transparent;
                                // border-radius: 5px;
                            }
                            padding: (15/54)*1rem;
                            border-radius: (5/54)*1rem;
                            background-color: rgba(241, 242, 246,1.0);
                            min-height: (50/54)*1rem;
                        pre{
                            white-space: pre-wrap;
                            font-size: (14/54)*1rem;
                            font-weight: 500;
                            
                        }
                    }
                    
                }
            }
            .send{
                align-self: flex-end;
                flex-flow: row-reverse nowrap;
                align-content: flex-start;
                div:nth-child(1){
                    min-width: (50/54)*1rem;
                    min-height: (50/54)*1rem;
                    width: (50/54)*1rem;
                    height: (50/54)*1rem;
                    background: url(../imgs/商务头像，男士.png) center no-repeat;
                    background-size: cover;
                    margin: 0 (10/54)*1rem;
                    border-radius: (5/54)*1rem;
                }
                div:nth-child(2){
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    span{
                        font-size: (14/54)*1rem;
                        font-weight: 500;
                    }
                    .send_content{
                        &::before{
                                content: '';
                                // background-color: red;
                                display: block;
                                position: absolute;
                                right: 0;
                                top: (18/54)*1rem;
                                z-index: 1;
                                transform: translateX(90%);
                                // width: 0;
                                // transform: rotate(45deg) translateY(50%);
                                border-left:6px solid rgba(241, 242, 246,1.0);
                                border-top:6px solid transparent;
                                border-bottom:6px solid transparent;
                                // border-radius: 5px;
                            }
                            padding: (15/54)*1rem;
                            border-radius: (5/54)*1rem;
                            background-color: rgba(241, 242, 246,1.0);
                            min-height: (50/54)*1rem;
                        pre{
                            white-space: pre-wrap;
                            font-size: (14/54)*1rem;
                            font-weight: 500;
                        }
                    }
                    
                }
            }
            .edit_frame{
                width: (922/54)*1rem;
                height: 9%;
                // position: absolute;
                // bottom: 0;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                background-color:rgba(241, 242, 246,1.0) ;
                @media screen and (max-width:1080px) {
                    width: 100%;
                }
                div:nth-child(1){
                    width: (820/54)*1rem;
                    height: 100%;
                    padding: (5/54)*1rem;
                    overflow: hidden;
                    @media screen and (max-width:1080px) {
                        width: 85%;
                    }
                    textarea{
                        width: (832/54)*1rem;
                        height: 100%;
                        overflow-y: scroll;
                        outline-style: none;
                        resize: none;
                        font-size: (14/54)*1rem;
                        font-weight: 500;
                        padding: (5/54)*1rem;
                        @media screen and (max-width:1080px) {
                            width: 100%;
                        }
                    }
                }
                div:nth-child(2){
                    width: (102/54)*1rem;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    @media screen and (max-width:1080px) {
                        width: 15%;
                    }
                    button{
                        width: 80%;
                        height: 60%;
                        background-color: rgba(46, 213, 115,1.0);
                        border: none;
                        border-radius: (5/54)*1rem;
                        outline-style: none;
                        &:active{
                            background-color: rgba(123, 237, 159,1.0);
                        }
                    }

                }
                
            }

        }
    }
    .page_four{
        background-color: rgba(163, 203, 56,1.0);
        position: relative;
        .main{
            width: 60%;
            height: 60%;
            background-color: yellow;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            @media screen and(max-width:1080px){
                width: 100%;
                height: 100%;
            }
        }
    }
    .page_five{
        background-color: rgba(163, 203, 56,1.0);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        .main{
            width: 60%;
            height: 60%;
            background-color: yellow;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: center;
            @media screen and(max-width:1080px){
                width: 100%;
                height: 100%;
            }
            a{
                img{
                    width: (100/54)*1rem;
                    background-color: red;
                    border-radius: 50%;
                }
            }
        }
    }
}

.active{
    background-color: rgb(20, 136, 145) !important;
}
.activeImg{
    visibility: visible !important;
}
.leftHide{
    visibility: hidden !important;
    transform-origin:0% center;
    animation:leftHide 1.5s linear 1;
}
.rightShow{
    visibility: visible !important;
    transform-origin:100% center;
    animation:rightShow 1.5s linear 1;
}
.leftShow{
    visibility: visible !important;
    transform-origin:0% center;
    animation:leftShow 1.5s linear 1;
}
.rightHide{
    visibility: hidden !important;
    transform-origin:100% center;
    animation:rightHide 1.5s linear 1;
}
@keyframes leftHide{
    0%{
        visibility: visible;
    }
    50%{
        transform:rotateY(30deg) translateX(-30%) scale(0.8);
    }
    100%{
        transform: translateZ(-200px);
    }
}
@keyframes rightShow{
    0%{
        visibility: visible; transform: translateZ(-200px);
    }
    50%{
        transform: rotateY(-30deg) translateX(30%) scale(0.8);
    }
    100%{
    }
}
@keyframes leftShow{
    0%{
        visibility: visible; transform: translateZ(-200px);
    }
    50%{
        transform: rotateY(30deg) translateX(-30%) scale(0.8);
    }
    100%{
    }
}
@keyframes rightHide{
    0%{
        visibility: visible;
    }
    50%{
        transform:rotateY(-30deg) translateX(30%) scale(0.8);
    }
    100%{
        transform: translateZ(-200px);
    }
}
@keyframes musicOne{
    0%{height: 20%;}
    20%{height: 50%;}
    40%{height: 40%;}
    60%{height: 70%;}
    80%{height: 40%;}
    100%{height: 60%;}
}
